import {
  Badge,
  Button,
  Card,
  Statistic,
  Descriptions,
  Divider,
  Dropdown,
  Menu,
  Popover,
  Steps,
  Table,
  Tooltip,
  Empty,
  Modal,
  Drawer,
} from 'antd';
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-layout';
import {
  DingdingOutlined,
  DownOutlined,
  EllipsisOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
import styles from './style.less';
import React, { useState, Fragment, useEffect } from 'react';
import { getTakeAwayUserOrderById } from '@/services/takeAwayUserOrderService';
import { OrderStatus } from '@/constants/commonConst';
import { dateFormat } from '@/utils/common';
import IconFontCN from '@/components/IconFontCN';
import { useParams } from 'react-router';

const { Step } = Steps;

type AdvancedState = {
  operationKey: string;
  tabActiveKey: string;
};

const DetailPage: React.FC<unknown> = () => {
  const params = useParams<{ id: string }>();
  const [orderDetail, setOrderDetail] = useState<TakeAwayUserOrderType.TakeAwayUserOrder>();
  const [tabStatus, seTabStatus] = useState<AdvancedState>({
    operationKey: 'tab1',
    tabActiveKey: 'detail',
  });

  const onTabChange = (tabActiveKey: string) => {
    seTabStatus({ ...tabStatus, tabActiveKey });
  };

  const extra = (
    <div className={styles.moreInfo}>
      <Statistic title="状态" value={OrderStatus.find(r => r.value === orderDetail?.Status)?.label} />
      <Statistic title="订单金额" value={orderDetail?.Price} prefix="¥" />
    </div>
  );

  const description = (
    <RouteContext.Consumer>
      {({ isMobile }) => (
        <Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 2}>
          <Descriptions.Item label="下单人">{orderDetail?.OrderUserName}</Descriptions.Item>
          <Descriptions.Item label="下单时间">{orderDetail?.AddTime}</Descriptions.Item>
          <Descriptions.Item label="支付方式">{orderDetail?.PayType === 1 ? "余额支付" : "微信支付"}</Descriptions.Item>
          <Descriptions.Item label="下单地址">{orderDetail?.UserAddress}</Descriptions.Item>
          <Descriptions.Item label="配送费">¥{orderDetail?.DeliveryPrice}</Descriptions.Item>
        </Descriptions>
      )}
    </RouteContext.Consumer>
  );

  const popoverContent = (
    <div style={{ width: 160 }}>
      吴加号
      <span className={styles.textSecondary} style={{ float: 'right' }}>
        <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
      </span>
      <div className={styles.textSecondary} style={{ marginTop: 4 }}>
        耗时：2小时25分钟
      </div>
    </div>
  );

  const desc1 = (
    <div className={classNames(styles.textSecondary, styles.stepDescription)}>
      <Fragment>
        <DingdingOutlined style={{ color: (orderDetail?.Status ?? 0) >= 0 ? '#00A0E9' : '', marginLeft: 8 }} />
        {orderDetail?.OrderUserName}
        <div>电话：{orderDetail?.UserPhone}</div>
      </Fragment>
      <div>{dateFormat(orderDetail?.AddTime, "yyyy-mm-dd hh:mm:ss")}</div>
    </div>
  );

  const desc3 = (
    <div className={styles.stepDescription}>
      <Fragment>
        {(orderDetail?.Status ?? 0) < 1 ? <IconFontCN onClick={() => { }} title='' typeString='icon-waimai-copy' style={{}} /> : <IconFontCN onClick={() => { }} title='' typeString='icon-waimai' style={{}} />}
      </Fragment>
    </div>
  );

  const desc2 = (
    <div className={styles.stepDescription}>
      <Fragment>
        <DingdingOutlined style={{ color: (orderDetail?.Status ?? 0) > 0 ? '#00A0E9' : '', marginLeft: 8 }} />
      </Fragment>
    </div>
  );

  const customDot = (dot: React.ReactNode, { status }: { status: string }) => {
    if (status === 'process') {
      return (
        <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
          <span>{dot}</span>
        </Popover>
      );
    }
    return dot;
  };

  const showOrderDetail = () => {
    return orderDetail?.OrderDetails.map((r: TakeAwayUserOrderDetailType.TakeAwayUserOrderDetailResponse) => {
      return <>
        <Descriptions style={{ marginBottom: 16 }} title={r.GoodName}>
          <Descriptions.Item label="数量">{r.Qty}</Descriptions.Item>
          <Descriptions.Item label="价格">{r.Price}</Descriptions.Item>
          <Descriptions.Item label="属性">{r.Properties.join(',')}</Descriptions.Item>
        </Descriptions>
        <Divider style={{ margin: '16px 0' }} />
      </>
    })
  }

  const getOrderDetail = async () => {
    const { Items } = await getTakeAwayUserOrderById(parseInt(params.id), { "@relationships": "OrderDetail" });
    setOrderDetail(Items[0]);
  }

  useEffect(() => {
    getOrderDetail();
  }, [params.id]);

  return (
    <PageContainer
      title={"单号：" + orderDetail?.OrderNumber}
      className={styles.pageHeader}
      content={description}
      extraContent={extra}
      tabActiveKey={tabStatus.tabActiveKey}
      onTabChange={onTabChange}
      tabList={[
        {
          key: 'detail',
          tab: '详情',
        },
      ]}
    >
      <div className={styles.main}>
        <GridContent>
          <Card title="外卖进度" style={{ marginBottom: 24 }}>
            <RouteContext.Consumer>
              {({ isMobile }) => (
                <Steps
                  direction={isMobile ? 'vertical' : 'horizontal'}
                  progressDot={customDot}
                  current={orderDetail?.Status}
                >
                  <Step title="用户下单" description={desc1} />
                  <Step title="商家已接单" description={desc2} />
                  <Step title="正在配送" description={desc3} />
                  <Step title="完成" />
                </Steps>
              )}
            </RouteContext.Consumer>
          </Card>
          <Card title="商品详情" style={{ marginBottom: 24 }} bordered={false}>
            <Card type="inner" title="商品列表">
              {showOrderDetail()}
            </Card>
          </Card>
        </GridContent>
      </div>
    </PageContainer>
  );
}

export default DetailPage;
